<template>
  <div id="dynamic-fade-demo" class="demo">
    Fade In:
    <input
      type="range"
      v-model="fadeInDuration"
      min="0"
      :max="maxFadeDuration"
    />
    Fade Out:
    <input
      type="range"
      v-model="fadeOutDuration"
      min="0"
      :max="maxFadeDuration"
    />
    <transition
      :css="false"
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <p v-if="show">hello</p>
    </transition>
    <button
      v-if="stop"
      @click="
        stop = false;
        show = false;
      "
    >
      Start animating
    </button>
    <button v-else @click="stop = true">Stop it!</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      fadeInDuration: 1000,
      fadeOutDuration: 1000,
      maxFadeDuration: 1500,
      stop: true,
    };
  },
  mounted() {
    this.show = false;
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      var vm = this;
      Velocity(
        el,
        { opacity: 1 },
        {
          duration: this.fadeInDuration,
          complete: function () {
            done();
            if (!vm.stop) vm.show = false;
          },
        }
      );
    },
    leave(el, done) {
      var vm = this;
      Velocity(
        el,
        { opacity: 0 },
        {
          duration: this.fadeOutDuration,
          complete: function () {
            done();
            vm.show = true;
          },
        }
      );
    },
  },
};
</script>

<style scoped>
.list-complete-item {
  transition: all 0.8s ease;
  display: inline-block;
  margin-right: 10px;
}

.list-complete-enter-from,
.list-complete-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.list-complete-leave-active {
  position: absolute;
}
</style>